<script setup lang="ts">
import { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric, useRouter } from 'vue-router';

const router = useRouter();

// 导航模块
const modules = [
  { 
    title: 'AI搜索', 
    icon: 'search', 
    color: '#1989fa', 
    path: '/smart-teaching/ai-search',
    bgColor: '#1989fa10'
  },
  { 
    title: '深度分析', 
    icon: 'bar-chart-o', 
    color: '#07c160', 
    path: '/smart-teaching/analysis',
    bgColor: '#07c16010'
  },
  { 
    title: '一键作图', 
    icon: 'photo-o', 
    color: '#ff9800', 
    path: '/smart-teaching/chart',
    bgColor: '#ff980010'
  },
  { 
    title: '一键做PPT', 
    icon: 'play-circle-o', 
    color: '#ee0a24', 
    path: '/smart-teaching/ppt',
    bgColor: '#ee0a2410'
  },
  { 
    title: '一键出题', 
    icon: 'notes-o', 
    color: '#7232dd', 
    path: '/smart-teaching/question',
    bgColor: '#7232dd10'
  },
  { 
    title: '学习社区', 
    icon: 'friends-o', 
    color: '#1989fa', 
    path: '/community',
    bgColor: '#1989fa10'
  },
];

const navigateTo = (path: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric) => {
  router.push(path);
};
</script>

<template>
  <div class="module-container">
    <div class="module-grid">
      <div 
        v-for="module in modules" 
        :key="module.title" 
        class="module-item hover-card"
        :style="{ backgroundColor: module.bgColor }"
        @click="navigateTo(module.path)"
      >
        <van-icon :name="module.icon" :color="module.color" size="28" />
        <span>{{ module.title }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.module-container {
  .module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    
    .module-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      span {
        margin-top: 8px;
        font-size: 14px;
        color: #323233;
        font-weight: 500;
      }
      
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .module-container .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    
    .module-item {
      padding: 16px;
    }
  }
}

@media (max-width: 480px) {
  .module-container .module-grid .module-item {
    padding: 12px;
    
    span {
      font-size: 12px;
    }
  }
}
</style>
